<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>jq编写的选项卡</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <style>
            * {
                margin:0;
                padding:0;
            }
            body {
                position:relative;
                height:3000px;
            }
            .login_box {
                width:300px;
                height:300px;
                border:1px solid #ccc;
                position:absolute;
                z-index:100;
                background:#fff;
            }
            .cover {
                width:100%;
                height:100%;
                background:#000;
                opacity:0.3;
            }
            <!--
            .login_box p:nth-of-type(1) {
                position:absolute;
                left:20px;
                top:60px;
            }
            .login_box p:nth-of-type(2) {
                position:absolute;
                left:37px;
                top:100px;
            }
            -->
            .login_box .close {
                position:absolute;
                right:5px;
                top:5px;
            }
            
        </style>
        <script>
            $( function () {
                $('.login').click( function () {
                
                    var oDiv = $('<div class="login_box"><p>用户名：<input type="text"/></p><p>密码：<input type="password"/></p><div class="close">X</div></div>');
                    $('body').append(oDiv);
                    
                    var oCover = $('<div class="cover"></div>');
                    oCover.insertBefore( $('.login') );
                    
                    $('.close').click( function () {
                        $('.login_box').remove();
                        oCover.remove();
                    } );
                    
                    oDiv.css('left', ($(window).width() - oDiv.outerWidth())/2 );
                    oDiv.css('top',($(window).height() - oDiv.outerHeight())/2);
                    
                    $(window).on('resize scroll', function () {
                        oDiv.css('left', ($(window).width() - oDiv.outerWidth())/2 );
                        oDiv.css('top',($(window).height() - oDiv.outerHeight())/2+ $(window).scrollTop()  );
                    } )
                    
                } )
            } )
        </script>
    </head>
    <body>
        
        <input type='button' value='登录' class='login'/>
        
        <!--
        <div class='login_box'>
            <p>
                用户名：
                <input type='text'/>
            </p>
            <p>
                密码：
                <input type='text'/>
            </p>
            <div class='close'>X</div>
        </div>
        -->
    </body>
</html>

